在數位科技蓬勃發展的今天，智慧推薦系統成為許多應用程序的重要組成部分，能根據用戶的行為和喜好提供個性化的內容。這篇文章將詳細介紹如何在 Android 應用中設計一個美觀且實用的用戶界面（UI），同時提供簡單的程式碼示例，讓您能夠迅速實現基本功能。

確定應用的功能需求

在設計用戶介面之前，首先需要明確應用的核心功能

• 用戶登錄/註冊：方便用戶創建賬戶或登錄。
• 首頁推薦：顯示針對用戶的內容推薦。
• 內容細節頁：提供更詳細的推薦內容信息。
• 個人資料管理：讓用戶能夠管理自己的個人數據和偏好。

設計基本的 UI 組件

登錄介面
使用者的第一印象非常重要，因此登錄界面應該簡潔明瞭。

XML 佈局示例（activity_login.xml）
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <TextView
        android:text="歡迎回來"
        android:textSize="24sp"
        android:layout_gravity="center"
        android:layout_marginBottom="24dp"/>

    <EditText
        android:hint="電子郵件"
        android:inputType="textEmailAddress"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <EditText
        android:hint="密碼"
        android:inputType="textPassword"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"/>

    <Button
        android:text="登錄"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"/>
</LinearLayout>
登錄功能的 Kotlin 程式碼（LoginActivity.kt）
class LoginActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_login)

        val loginButton = findViewById<Button>(R.id.loginButton)
        loginButton.setOnClickListener {
            val email = findViewById<EditText>(R.id.emailInput).text.toString()
            val password = findViewById<EditText>(R.id.passwordInput).text.toString()
            // 添加登錄邏輯
        }
    }
}

首頁推薦介面

在首頁中，我們希望展示基於用戶喜好的推薦信息，使用 RecyclerView 進行展示非常合適。

XML 佈局示例（activity_home.xml）
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:text="今日推薦"
        android:textSize="24sp"
        android:layout_margin="16dp"/>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/title"/>
</RelativeLayout>
RecyclerView 項目佈局示例（item_recommendation.xml）
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="8dp">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:scaleType="centerCrop"/>

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18sp"/>

    <TextView
        android:id="@+id/description"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="14sp"/>
</LinearLayout>

RecyclerView 適配器（RecommendationAdapter.kt）

class RecommendationAdapter(private val recommendations: List<Recommendation>) :
    RecyclerView.Adapter<RecommendationAdapter.RecommendationViewHolder>() {

    class RecommendationViewHolder(view: View) : RecyclerView.ViewHolder(view) {
        val title: TextView = view.findViewById(R.id.title)
        val description: TextView = view.findViewById(R.id.description)
        val imageView: ImageView = view.findViewById(R.id.imageView)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecommendationViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.item_recommendation, parent, false)
        return RecommendationViewHolder(view)
    }

    override fun onBindViewHolder(holder: RecommendationViewHolder, position: Int) {
        val recommendation = recommendations[position]
        holder.title.text = recommendation.title
        holder.description.text = recommendation.description
        // 使用 Glide 或 Picasso 加載圖片
    }

    override fun getItemCount() = recommendations.size
}

內容詳細頁面

內容詳細頁面旨在為用戶提供選擇內容的更深層信息。

XML 佈局示例（activity_detail.xml）
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <ImageView
        android:id="@+id/detailImage"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:scaleType="centerCrop"/>

    <TextView
        android:id="@+id/detailTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="24sp"
        android:layout_marginTop="16dp"/>

    <TextView
        android:id="@+id/detailDescription"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"/>
</LinearLayout>

設計一個有效的智慧推薦系統用戶介面需要考慮多方面的因素，包括使用者的需求、易用性以及視覺吸引力。在這篇教學中，我們介紹了如何利用 Android 開發環境創建基本的用戶介面